/* 左边栏目的tab
* LeftTabs.jsx
*/
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';

import { Map,List} from 'immutable';

import {changePageNum,deletePage} from '../../actions/h5/PageAction';
import {changeCompOrder,handleCompHide,deleteComp,updateCompName} from '../../actions/h5/ComponentAction';

import TextInput from '../../components/TextInput.jsx';

import {getPageComponents,getTypeIcon} from '../../utils/H5helper';

//左边页面列表
class PageList extends Component{

	constructor(props){
		super(props);
		this.dragPageId='';//拖拉交换页面位置
	}
	
	componentDidMount(){
		if(document){
			let h=document.body.clientHeight;//网页可见区域高
			document.querySelector('#pages').style.height=(h-100)+'px';
		}
	}

	pageClick(pageId){
		if(pageId!=this.props.activePage)
			this.props.onPageClick(pageId);
	}

	deletePage(e,pageId,pageNum){
		e.preventDefault()|| e.stopPropagation();
		if(window.confirm('确认要删除吗？')){
			if(pageId===this.props.activePage){//如果删除当前选中页
				alert('无法删除当前正在操作的页面');
				return;
			}
			this.props.dispatch(deletePage(pageId));
		}
	}

	pageDragStart(e,pageId){
		console.log('拖拉交换页面位置:'+pageId);
		this.dragPageId=pageId;//要移动的页面
	}

	pageDrop(e,pageId){
		//console.log('drop drag:'+pageId);
		if(this.dragPageId!=pageId){
			this.props.dispatch(changePageNum(this.dragPageId,pageId));
		}
	}

	dragOver(e){
		e.preventDefault()|| e.stopPropagation();
	}

	render(){
		let pagelist=Array();
		this.props.dataList.forEach(page=>{
			if(page!=null){
				const currId=page.get('id');
				const components=getPageComponents(page);
				let liClass="list-group-item page-list-item";
				let deleteBtn=(<i className="close icon" onClick={e=>this.deletePage(e,currId,page.get('pageNum'))}></i>);
				if(currId===this.props.activePage){
					liClass=liClass+" active";
					deleteBtn=(<i className="icon"></i>);
				}
				const pageAttr=page.get('attributes');
				const bkstyle={opacity: pageAttr.get('backgroundOpacity'), background:pageAttr.get('background'),backgroundSize:'cover!important'};
				pagelist.push(
					<li key={currId} className={liClass} draggable="true" 
						onDragStart={e=>this.pageDragStart(e,currId)}
						onDrop={e=>this.pageDrop(e,currId)}
						onClick={this.pageClick.bind(this,currId)}>
						{deleteBtn}
						<div className="page-thumbnail">
							<div className="main-stage">
								<div className="backface" style={bkstyle}></div>
								{components}
							</div>
						</div>
					</li>
				);
			}
			
		});

		let classProps="ui bottom attached tab segment";
		if(this.props.active){
			classProps += " active";
		}

		return (
			<div id="pages" className={classProps}  data-tab="pages">
				<page-panel>
					<pages className="fadeInLeftShort animated for-edit-ui" >
						<div className="padder page-list">
							<ul className="list-group list-group-sp" onDragOver={e=>this.dragOver(e)} 
								style={{paddingBottom:"350px"}}>
								{pagelist}
							</ul>
						</div>
					</pages>
					<div className="tailer">
						<button className="newAddBtn" title="添加新页面" onClick={()=>this.props.newPageClick()}>
							<i className="plus icon"></i>
						</button>
					</div>
				</page-panel>
			</div>
		);
	}

}

//左边布局tab
class LayoutTab extends Component{
	constructor(props){
		super(props);
		this.dragCompId='';//拖拉交换组件位置
	}

	compDragStart(e,compId){
		//console.log('拖动交换组件位置:'+compId);
		this.dragCompId=compId;//要移动的组件
	}

	compDrop(e,compId){
		if(this.dragCompId!=compId){
			this.props.dispatch(changeCompOrder(this.props.pageId,this.dragCompId,compId));
		}
	}

	dragOver(e){
		e.preventDefault()|| e.stopPropagation();
	}

	hiddenClick(id){//点击显示的icon，隐藏该组件
		this.props.dispatch(handleCompHide(this.props.pageId,id,true));
	}

	showClick(id){//点击显示的icon，显示该组件
		this.props.dispatch(handleCompHide(this.props.pageId,id,false));
	}

	selectComp(e,comp){//点击当前组件，编辑区域显示选中框
		e.preventDefault()|| e.stopPropagation();
		this.props.setSelectComp(comp);
	}

	deleteComponent(e,currId){//删除组件
		e.preventDefault()|| e.stopPropagation();
		this.props.hiddenSelComp();
		this.props.dispatch(deleteComp(this.props.pageId,currId));
	}

	editCompName(currId,text){
		this.props.dispatch(updateCompName(this.props.pageId,currId,text));
	}

	render(){

		const items=this.props.compsList.map(comp=>{
			if(comp==null) return '';
			let contentStyle={};
			const currId=comp.get('id');
			if(this.props.compId==currId){//选中的组件字体红色
				contentStyle={color:'red',fontWeight:'bold'};
			}
			let hideIcon;
			if(comp.get('hidden')){
				hideIcon=(<i className="hide icon" onClick={()=>this.showClick(currId)}></i>);
			}else{
				hideIcon=(<i className="unhide icon" onClick={()=>this.hiddenClick(currId)}></i>);
			}
			return (
				<div className="item" key={currId} draggable="true" onDragStart={e=>this.compDragStart(e,currId)} 
					onDrop={e=>this.compDrop(e,currId)} onClick={e=>this.selectComp(e,comp)} >
				  	<div className="right floated content">
				      <i className="trash icon" onClick={(e)=>this.deleteComponent(e,currId)} ></i>
				    </div>
				    {hideIcon}
				    <div className="content" style={contentStyle}>
				    	{getTypeIcon(comp.get('type'))}
				    	<TextInput text={comp.get('name')} handleEdit={(text)=>this.editCompName(currId,text)} length="8" />
				    </div>
			    </div>
			);
		});
		let classProps="ui bottom attached tab segment layout";
		if(this.props.active){
			classProps += " active";
		}
		return (
			<div className={classProps} data-tab="layout">
				<h4 className="ui header">组件顺序</h4>
				<div className="ui middle selection divided list"
					onDragOver={e=>this.dragOver(e)}
					style={{border:"1px solid rgba(34, 36, 38, 0.15)"}}>
				  {items}
				</div>
			</div>
		);
	}
}

//左边栏目
class LeftTabs extends Component{
	constructor(props){
		super(props);
		this.state={pageActive:true,layoutActive:false};
	}
	
	tabClick(name){
		const newState=Object.assign({pageActive:false,layoutActive:false}, {[name]:true}); 
		this.setState(newState);
	}

	render(){

		const pageProps={
			dataList : this.props.pageList,
			activePage:this.props.activePage,
			onPageClick:this.props.onPageClick,
			newPageClick:this.props.newPageClick,
			dispatch:this.props.dispatch
		}

		const layoutProps={
			pageId:this.props.activePage,
			compId:this.props.selComp.get('id'),
			compsList:this.props.activePageCompsList,
			setSelectComp:this.props.setSelectComp,
			dispatch:this.props.dispatch,
			hiddenSelComp:this.props.hiddenSelComp
		}

		return(
		  	<aside className="edit-left-side">
			  	<div className="ui top attached tabular menu">
			  		<a id="pageTab" className={this.state.pageActive?"item active":"item"}  onClick={this.tabClick.bind(this,'pageActive')}>页面 </a>
			  		<a className={this.state.layoutActive?"item active":"item"} onClick={this.tabClick.bind(this,'layoutActive')}>布局 </a>
				</div>
				<PageList {...pageProps} active={this.state.pageActive} />
				<LayoutTab {...layoutProps} active={this.state.layoutActive} />
			</aside>
		);
	}
}

export default connect((state,ownProps)=>{
	//把pages对象按pageNum进行排序，生成一个排序后的页面列表数组
	let pageList=List();
	const dataList=state.app.h5Reducer.data.pages;
	dataList.forEach(function (item) {
  		const idx=item.get('pageNum')-1;
  		pageList=pageList.set(idx,item);
	});
	//获取当前选中页面的所有组件，生成排序后的数组
	let compsList=List();
	const activePageId=state.app.h5Reducer.activePageId?state.app.h5Reducer.activePageId:ownProps.activePage;
	const page=dataList.get(activePageId);//当前活动页面
	if(page){
		page.get('components').forEach(comp=>{
			const idx=comp.get('compNum')-1;
			compsList=compsList.set(idx,comp);
		});
	}
	return {
		pageList:pageList,
		activePageCompsList:compsList
	};

})(LeftTabs);
